import React, { useState, useEffect } from 'react';
import { Card, List, Button, Tag, Space, Alert, Typography, Divider } from 'antd';
import { SyncOutlined, CalendarOutlined } from '@ant-design/icons';
import type { Task } from '../../types';
import { useUserStore } from '../../store/userStore';
import { getTodayRandomTasks } from '../../data/environmentalTasks';

const { Title, Text } = Typography;

const EnvironmentalTasks: React.FC = () => {
  const { user, completeTask, tasks, addTask, resetDailyTasks } = useUserStore();
  const [dailyTasks, setDailyTasks] = useState<Task[]>([]);
  const [lastRefreshDate, setLastRefreshDate] = useState<string>('');
  const [isRefreshing, setIsRefreshing] = useState(false);
  const [currentDate, setCurrentDate] = useState(new Date().toISOString().split('T')[0]);
  const [taskRefreshedToday, setTaskRefreshedToday] = useState(false);

  // 初始化及每次打开组件时检查日期
  useEffect(() => {
    console.log("组件挂载，检查是否需要刷新任务");
    const today = new Date().toISOString().split('T')[0];
    const storedDate = localStorage.getItem('lastTaskRefreshDate');
    
    // 更新当前日期
    setCurrentDate(today);
    
    // 检查本地存储中记录的最后刷新日期
    if (storedDate !== today) {
      console.log(`需要刷新任务: 上次刷新(${storedDate || '从未'}) != 今天(${today})`);
      refreshDailyTasks();
      setTaskRefreshedToday(true);
    } else {
      console.log(`今天已经刷新过任务: ${storedDate}`);
      setTaskRefreshedToday(true);
      
      // 从现有任务中筛选今天的环保任务
      const environmentalTasks = getEnvironmentalTasksFromCurrentTasks();
      setDailyTasks(environmentalTasks);
      setLastRefreshDate(storedDate);
    }
    
    // 设置一个定时器，每小时检查一次日期变化
    const intervalId = setInterval(() => {
      const newDate = new Date().toISOString().split('T')[0];
      
      // 如果日期变化了，刷新任务并更新状态
      if (newDate !== currentDate) {
        console.log(`日期已变化: ${currentDate} -> ${newDate}`);
        setCurrentDate(newDate);
        setTaskRefreshedToday(false);
        refreshDailyTasks();
      }
    }, 3600000); // 每小时检查一次
    
    return () => {
      // 清理定时器
      clearInterval(intervalId);
    };
  }, []);
  
  // 当任务列表变化时，更新环保任务显示
  useEffect(() => {
    if (tasks.length > 0 && taskRefreshedToday) {
      const environmentalTasks = getEnvironmentalTasksFromCurrentTasks();
      setDailyTasks(environmentalTasks);
    }
  }, [tasks, taskRefreshedToday]);

  // 从当前任务列表中获取今天的环保任务
  const getEnvironmentalTasksFromCurrentTasks = () => {
    // 获取今天的日期
    const today = new Date().toISOString().split('T')[0];
    
    // 查找今天的环保任务（类型为daily且deadline是今天的任务）
    return tasks.filter(task => {
      if (task.type !== 'daily') return false;
      
      // 检查deadline是否是今天
      if (task.deadline) {
        const taskDate = new Date(task.deadline).toISOString().split('T')[0];
        return taskDate === today;
      }
      
      return false;
    });
  };

  // 手动刷新每日环保任务
  const handleRefreshTasks = () => {
    // 检查是否已经是今天刷新过
    const today = new Date().toISOString().split('T')[0];
    const storedDate = localStorage.getItem('lastTaskRefreshDate');
    
    // 如果今天已经刷新过，则显示提示而不是刷新
    if (storedDate === today && dailyTasks.length > 0) {
      alert('今天已经刷新过任务，请明天再来！');
      return;
    }
    
    // 检查是否已完成过今天的任务
    const existingTasks = getEnvironmentalTasksFromCurrentTasks();
    const hasCompletedTasksToday = existingTasks.some(task => task.completed);
    
    if (hasCompletedTasksToday) {
      alert("你已经完成了今天的部分任务，不能重新刷新任务！");
      return;
    }
    
    setIsRefreshing(true);
    refreshDailyTasks();
    setTimeout(() => setIsRefreshing(false), 500);
  };

  // 刷新每日环保任务
  const refreshDailyTasks = () => {
    console.log("执行刷新任务...");
    
    // 检查是否已经完成过今天的任务
    const today = new Date().toISOString().split('T')[0];
    const existingTasks = getEnvironmentalTasksFromCurrentTasks();
    const hasCompletedTasksToday = existingTasks.some(task => task.completed);
    
    // 如果今天已经完成过任务，则不允许刷新
    if (hasCompletedTasksToday) {
      console.log("今天已经完成过任务，不允许刷新获取新任务");
      alert("你已经完成了今天的部分任务，不能重新刷新任务！");
      setIsRefreshing(false);
      return;
    }
    
    // 先清除之前的所有daily类型任务
    resetDailyTasks();
    
    // 生成新的环保任务
    const newTasks = getTodayRandomTasks();
    console.log(`生成了 ${newTasks.length} 个新任务`);
    
    // 添加今天的新任务
    newTasks.forEach(task => {
      addTask(task);
    });
    
    // 更新UI显示
    setDailyTasks(newTasks);
    
    // 更新刷新时间
    localStorage.setItem('lastTaskRefreshDate', today);
    setLastRefreshDate(today);
    setTaskRefreshedToday(true);
    
    console.log("任务刷新完成，日期已更新");
  };

  const handleCompleteTask = async (taskId: string) => {
    try {
      await completeTask(taskId);
      
      // 更新UI上的任务状态
      setDailyTasks(dailyTasks.map(task => 
        task.id === taskId ? {...task, completed: true} : task
      ));
    } catch (error) {
      console.error('完成任务失败:', error);
    }
  };

  // 格式化日期显示
  const formatDate = (dateString: string) => {
    if (!dateString) return '';
    
    const date = new Date(dateString);
    return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
  };

  return (
    <div style={{ padding: '24px' }}>
      <Card 
        title={
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <Title level={4} style={{ margin: 0 }}>
              <CalendarOutlined style={{ marginRight: 8 }} />
              今日环保任务
            </Title>
            <Space>
              <Text type="secondary">
                当前日期: {formatDate(currentDate)}
              </Text>
              <Button 
                icon={<SyncOutlined spin={isRefreshing} />} 
                onClick={handleRefreshTasks}
                loading={isRefreshing}
                disabled={lastRefreshDate === currentDate && dailyTasks.length > 0}
                title={lastRefreshDate === currentDate && dailyTasks.length > 0 ? "今天已经刷新过任务，请明天再来！" : "刷新今日任务"}
              >
                {lastRefreshDate === currentDate && dailyTasks.length > 0 ? "今日已刷新" : "重新随机"}
              </Button>
            </Space>
          </div>
        }
      >
        <Alert 
          message="完成这些日常环保任务可以获得绿色能量，提升你的星球健康度!" 
          type="success" 
          showIcon 
          style={{ marginBottom: '16px' }}
        />
        
        <Divider orientation="left">每日随机任务 (4个)</Divider>
        
        {dailyTasks.length === 0 ? (
          <div style={{ textAlign: 'center', padding: '20px 0' }}>
            <SyncOutlined spin style={{ fontSize: 24, marginBottom: 16 }} />
            <p>正在加载今日任务...</p>
          </div>
        ) : (
          <List
            dataSource={dailyTasks}
            renderItem={task => (
              <List.Item
                actions={[
                  <Button
                    type="primary"
                    onClick={() => handleCompleteTask(task.id)}
                    disabled={task.completed}
                  >
                    {task.completed ? '已完成' : '标记为已完成'}
                  </Button>
                ]}
              >
                <List.Item.Meta
                  title={
                    <Space>
                      {task.title}
                      <Tag color={task.completed ? 'green' : 'blue'}>
                        {task.completed ? '已完成' : '进行中'}
                      </Tag>
                    </Space>
                  }
                  description={task.description}
                />
                <div>
                  <div style={{ color: '#4CAF50', marginBottom: '4px' }}>
                    +{task.reward.greenEnergy} 绿色能量
                  </div>
                  <div style={{ color: '#666' }}>
                    -{task.reward.carbonReduction} kg CO₂
                  </div>
                  {task.reward.waterQuality && (
                    <div style={{ color: '#2196F3' }}>
                      +{(task.reward.waterQuality * 100).toFixed(1)}% 水质改善
                    </div>
                  )}
                </div>
              </List.Item>
            )}
          />
        )}
      </Card>
    </div>
  );
};

export default EnvironmentalTasks; 